<template>
  <div class="goods-container">
    <div class="goods-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in goodsList"
          :key="item.name"
          :title="item.name"
          @click="clickLeftTitle(item.name)"
        />
      </van-sidebar>
    </div>
    <div class="goods-right">
      <div>
        <div v-for="item in goodsList" :key="item.i" :id="item.name">
          <p>{{ item.name }}</p>
          <van-card
            v-for="items in item.foods"
            :key="items.id"
            tag="特价"
            :price="items.price"
            :desc="items.goodsDesc"
            :title="items.name"
            :thumb="items.imgUrl"
          >
          <!-- 加减按钮 -->
          <template #footer>
           <!-- <van-stepper theme="round" button-size="22" disable-input /> -->
           <button v-show="items.count>0" @click="$store.commit('moveNum',{id:items.id,num:-1})" class="decnum"> - </button>
           <label v-show="items.count>0">{{items.count}}</label>
          <button @click="$store.commit('moveNum',{id:items.id,num:1})" class="addnum"> + </button>
          </template>
          </van-card>
          <van-divider  />
        </div>
      </div>
    </div>
    
    
    
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_goodslist } from "@/api/order";
import BScroll from "better-scroll";


@Component
export default class Goods extends Vue {
// data
  value: number = 0;
  activeKey: number = 0;
  // 弹出层show
  show:boolean=false;
  // 保存滚动对象
  scrollbar: any;

// 生命周期
  created(): void {
    $_goodslist().then((result) => {
      this.$store.commit('get_goodslist',result.data.goodsList)
      // console.log(this.goodsList);
    });
  }
  mounted(): void {
    // 保存滚动条对象
    this.scrollbar = new BScroll(".goods-right",{click:true});
  
  }

// 计算属性
  get goodsList():any{
    // 获取vuex的值
    return this.$store.state.goodsList
  }
  

// methods
  onSubmit(): void {
    console.log("提交");
  }
  clickLeftTitle(name: string): void {
    console.log(document.querySelector('.goods-right'));
    // 滚动条事件
    this.scrollbar.scrollToElement(document.getElementById(name), 600);
  }

}
</script>

<style scoped lang="scss">
.goods-container {
  display: flex;
  overflow: hidden;
  flex: 1;

  .goods-left {
    width: 80px;
    overflow: auto;
  }
  .goods-right {
    flex: 1;
    overflow: auto;
  }

  .decnum,.addnum{
    width: 28px;
    height: 28px;
    line-height: 22px;
    text-align: center;
    border-radius: 8px;
    border: none;
    font-size: 18px;
    font-weight: 800;
    margin: 0 10px;
  }
  .decnum{
    background: #fff;
    border: .1rem solid #ffcc33;
  }
  .addnum{
    background: #ffcc33;
  }
}
</style>